<template>
  <div class="plugin-order-create-footer animate__fadeInUp animate__animated animate__faster">
    <div class="padding">
      <div class="btn">
        <t-button v-if="type == 'order'" theme="primary" size="large" :loading="loading" @click="onTicket">
          {{ $t('common.create') }}{{ plugin.t('create.order') }}
        </t-button>
        <t-button v-if="type == 'expect'" theme="success" size="large" :loading="loading" @click="onExpect">
          {{ store.getData().id ? $t('common.update') : $t('common.create') }}{{ plugin.t('create.expect') }}
        </t-button>
      </div>
      <div class="total">
        <div class="item">
          <div class="money font-number">{{ data.count }}</div>
          <div class="name">{{ plugin.t('order.count') }}</div>
        </div>
        <div class="item" v-if="data.discount_money">
          <div class="money font-number success">{{ app.money.format(data.discount_money) }}</div>
          <div class="name success">{{ plugin.t('order.discount_money') }}</div>
        </div>
        <div class="item">
          <div class="money font-number">{{ app.money.format(data.money_tax) }}</div>
          <div class="name">{{ plugin.t('order.money_tax') }}</div>
        </div>
        <div class="item">
          <div class="money font-number">{{ app.money.format(data.tax_money) }}</div>
          <div class="name">{{ plugin.t('order.tax_money') }}</div>
        </div>
        <div class="item" v-if="data.req_money">
          <div class="money font-number">{{ app.money.format(data.req_money) }}</div>
          <div class="name">{{ plugin.t('order.req_money') }}</div>
        </div>
        <div class="item">
          <div class="money font-number">{{ app.money.format(data.money) }}</div>
          <div class="name">{{ plugin.t('order.money') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import store from './store'
  import index from '../../index'
  
  const plugin = index.plugin
  const data = store.data
  const type = store.type
  const loading = ref(false)
  
  const onTicket = () => {
    if(store.valid()) {
      loading.value = true
      store.postTicket().then(code => {
        app.message('success', [plugin.message('message.ok'), { code }])
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  const onExpect = () => {
    if(store.valid()) {
      loading.value = true
      store.postExpect().then(code => {
        app.message('success', [plugin.message('message.ok'), { code }])
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-order-create-footer{
    width: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1); 
    position: fixed;
    bottom: 0;
    left: 0; 
    overflow: hidden;
    z-index: 1;
    
    .padding{
      padding: 0 30px;
    }

    .btn{
      float: right;
      padding: 25px 0 0 20px;

      button{
        margin-left: 20px
      }
    }
    .total{
      float: right;
      display: flex;
      
      .item{
        padding: 20px 20px 15px;
        border-left: 1px $color-border solid;
        text-align: right;

        .money{
          font-size: 32px;
          color: $color-title;
        }

        .name{
          font-size: 12px;
          color: $color-body;
          margin-top: 10px;
        }

        .success{
          color: $color-success;
        }

        .error{
          color: $color-error;
        }
      }
    }
  }
</style>